page-index {
    @function computed-vw($px) {
        @return $px/1080*100vw;
    }
    $quick-nav-img-width-height: computed-vw(88);
    $title-color: #1e2029;
    $time-color: #939598;
    .divButton{
        height: 5vw;
        width: 15vw;
        background: #999;
    }
    .toolbar-ios {
        .back {
            width: 7vw;
            height: 8vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_return.png);
            background-repeat: no-repeat;
        }
        .menu {
            width: 6.5vw;
            height: 5.5vw;
            display: block;
            background-size: cover;
            background-image: url(../assets/images/client/client-filter/icon_menu.png);
            background-repeat: no-repeat;
        }
        .toolbar-title-ios {
            .nav-btn {
                height: 100%;
                color: #fff;
                background-color: transparent;
                font-size: 5vw;
                padding: 0;
                width: 87.5px;
                text-align: center;
                &_active {
                    color: rgb(255, 202, 55);
                }
            }
        }
    }
    .scroll-content {
        background-color: #FFF;
    }
    .banner-warp {
        background-color: #f5f5f5;
        width: 100%;
        height: computed-vw(500);
    }
    .banner-warp.empty{
        background-color:#e8e8e8;
    }
    .banner-slide-image {
        width: 100%;
        height: computed-vw(500);
        margin-top: 0px;
        background-color: #FFF;
    }
    .swiper-pagination-bullet-active {
        background-color: #39af4d;
        opacity: 1;
    }

    /*快速导航*/
    .quick-nav {
        padding: computed-vw(60);
        overflow: hidden;
        .nav-panel{
            float:left;
            width:25%;
            .panel-content{
                min-width:computed-vw(82);
                margin:0 auto;
                .content-img{
                    display: block;
                    width:computed-vw(80);
                    height:computed-vw(80);
                    background-size:cover!important;
                    margin:0 auto;
                    margin-bottom: computed-vw(16);
                }
                .img-client{
                    background: url('../assets/images/index/icon_home1.png') no-repeat center;
                }
                .img-staff{
                    background: url('../assets/images/index/icon_home2.png') no-repeat center;
                }
                .img-activity{
                    background: url('../assets/images/index/icon_home3.png') no-repeat center;
                }
                .img-policy{
                    background: url('../assets/images/index/icon_home4.png') no-repeat center;
                }
                .img-schedule{
                    background: url('../assets/images/index/icon_home5.png') no-repeat center;
                }
                .img-webcast{
                    background: url('../assets/images/index/icon_home6.png') no-repeat center;
                }
                .img-message{
                    background: url('../assets/images/index/icon_home7.png') no-repeat center;
                }
                .img-my{
                    background: url('../assets/images/index/icon_home8.png') no-repeat center;
                }
                .content-word{
                    display: block;
                    width:100%;
                    text-align: center;
                    font-size: computed-vw(45);
                    color:#323333;
                }
            }
        }
        .next-row{
            margin-top: computed-vw(68);
        }
    }
    .line-panel{
        background-color: #f5f5f5;
        margin:0;
        width:100%;
        height:computed-vw(40);
    }

    .quick-nav div {
        width: 24%;
        display: inline-block;
        background-color: #fff;
    }

    .quick-nav > div div {
        width: 100%;
        text-align: center;
    }

    .quick-nav span {
        font-size: computed-vw(42);
        color: #22212A;
    }

    .quick-nav-img {
        height: computed-vw(80);
    }

    .customer-img {
        background: url('../assets/images/index/ic_home_user.png') no-repeat center;
        background-size: computed-vw(82) computed-vw(80);
    }

    .date-img {
        background: url('../assets/images/index/ic_home_date.png') no-repeat center;
        background-size: $quick-nav-img-width-height;
    }

    .msg-img {
        background: url('../assets/images/index/ic_home_mes.png') no-repeat center;
        background-size: $quick-nav-img-width-height;
    }

    .live-img {
        background: url('../assets/images/index/ic_home_me-live.png') no-repeat center;
        background-size: $quick-nav-img-width-height;
    }

    /*头条*/
    .top-msg-warp {
        margin: computed-vw(60) computed-vw(60) computed-vw(45) computed-vw(60);
        position: relative;
        display: flex;
        align-items: center;
       /* div {
            display: inline-block;
        }*/
        .top-msg-header {
            border-left: computed-vw(10) solid #35ac63;
            height: computed-vw(78);
            line-height:computed-vw(78);
            font-size: computed-vw(55);
            padding-left: computed-vw(24);
        }

        .top-msg-middle {
            width: 58%;
            text-align: left;
            height: computed-vw(77);
            line-height:computed-vw(77);
            font-size: computed-vw(45);

            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            color: #333333;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            margin-left: computed-vw(36);
            .swiper-slide{
                width:100%!important;
            }
        }

        .top-msg-middle-title {
            display: flex;
            align-items: center;

            height: computed-vw(77);
            line-height:computed-vw(77);

            color: #999;
            width: 100%;
            font-size: computed-vw(42);
            text-align: left;
            word-break: break-all;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .top-msg-last {
            //background: url('../assets/images/index/ic_hotnews_more.png') no-repeat center;
            background: url('../assets/images/index/may/icon_next.png') no-repeat center;
            background-size: computed-vw(19) computed-vw(31);
            display: inline-block;
            width: 10%;
            height: computed-vw(60);
            margin-left: computed-vw(12);
            line-height: computed-vw(45);
            position: absolute;
            right:-3vw;
            top:50%;
            margin-top: computed-vw(-30);
            //display: none;
        }
    }
    /*热点资讯*/
    .hot-msg-image {
        width: computed-vw(630);
        height: computed-vw(310);
        text-align: left;
        background-color: #3eac4a;
        margin-right: computed-vw(36);
        position: relative;
    }

    .hot-msg-title {
        background-color: rgba(0, 0, 0, 0.1);
        width: computed-vw(627);
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        word-break: break-all;
        font-size: computed-vw(42);
        margin-top: computed-vw(-90);
        color: #FFF;
        position: absolute;
    }

    .prevImg {
        background-color: red;
        width: computed-vw(180);
        height: computed-vw(70);
        line-height: computed-vw(70);
        border-radius: computed-vw(35);
        text-align: center;
        position: absolute;
        top: 2.77778vw;
        left: 2.22222vw;
        font-size: 3.33333vw;
        color: #fff;
        z-index: 10;
    }

    #hot-box {
        background-color: #f5f5f5;
        height: computed-vw(360);
        margin: 0px computed-vw(60) computed-vw(75) computed-vw(60);
        .slide-zoom{
            height: 100%;
        }
    }
    #hot-box.empty{
        background-color:#f5f5f5;
    }
    .demo-img{
        background-color: #fff;
        padding: computed-vw(60) computed-vw(60) computed-vw(75) computed-vw(60);
        img{
            display: inline-block;
            width: 100%;
        }
    }

    /* 最近日程 */
    .calendar {

        .calendar-title {
            margin: 5.56vw 5.56vw;
            div{
                display: inline-block;
            }
            .title-left {
                border-left: computed-vw(10) solid #35ac63;
                height: computed-vw(78);
                line-height:computed-vw(78);
                font-size: computed-vw(55);
                padding-left: computed-vw(24);
            }

            .title-arrow{
                float: right;
                margin-top: 2vw;
                height:computed-vw(45);
                width: 5.55vw;
                i {
                    width: 1.76vw;
                    height: 2.87vw;
                    background: url("../assets/images/index/may/icon_next.png");
                    background-size: cover;
                    display: inline-block;
                    float: right;
                }
            }
        }

        .calendar-content {

            margin-left: 5.56vw;

            &.left {
                text-align: left;
            }

            &.center {
                text-align: center;
            }

            .calendar-item {

                width: 88.89vw;
                //height: 15.19vw;
                //height: 20vw;
                //background-color: #F9F9F9;
                display: flex;
                align-items: center;

                &.normal-background {
                    background-color: #F9F9F9;
                    border-left:1.11vw solid #F9F9F9;
                }

                &.special-background {
                    background-color: #fff9eb;
                    border-left:1.11vw solid #fec938;
                }

                &.normal-item {
                    margin-bottom: 3.33vw;
                }

                &.last-item {
                    margin-bottom: 5.56vw;
                }

                .item-left {
                    font-size: 3.89vw;
                    margin-left: 5.56vw;
                    padding-top: 3.7vw;
                    padding-bottom: 3.7vw;

                    &.green {
                        color: #35ac63;
                    }

                    &.gray {
                        color: #333;
                    }

                    .time {
                        display: block;
                    }

                    .customer {
                        display: block;
                        margin-top: 0.8vw;
                    }

                    .customer-sys {
                        margin-top: 0.8vw;
                        display: block;
                        .tip {
                            color: #e66660;
                            font-weight: normal;
                            margin-right: 1.67vw;
                        }
                        .name {
                            font-weight: bold;
                            font-size: 3.796vw;
                        }
                    }
                }

                .item-right {
                    margin-left: auto;
                    margin-right: 5.56vw;
                    i{
                        //height: 4.35vw;
                        //width: 4.35vw;
                        height: 6.67vw;
                        width: 6.67vw;
                        background: url("../assets/images/index/may/ic_clock_yellow.png");
                        background-size: cover;
                        display: inline-block;
                    }
                }
            }

            //.calendar-add {
            //    width: 28.52vw;
            //    height: 8.98vw;
            //    margin-bottom: 8.66vw;
            //}
            //
            //button {
            //    background-color: #35ac63;
            //    color: #fff;
            //    font-size: 3.89vw;
            //    border-radius: 5vw;
            //}
        }

        .calendar-showbtn {

            text-align: center;

            .calendar-add {
                width: 28.52vw;
                height: 8.98vw;
                margin-bottom: 8.66vw;
            }

            button {
                background-color: #35ac63;
                color: #fff;
                font-size: 3.89vw;
                border-radius: 5vw;
            }
        }
    }

    .customer {
        .customer-item {

            margin: 5.56vw 5.56vw;
            color: #fff;

            .item-left {

                width: 42.59vw;
                height: 24.07vw;
                background: url("../assets/images/index/may/bg_birthday.png");
                background-size: cover;
                display: inline-block;

                .title {
                    display: block;
                    font-size: 5vw;
                    margin-left: 4.17vw;
                    margin-top: 3vw;
                    margin-bottom: 3vw;
                }

                .num {
                    display: block;
                    font-size: 6.67vw;
                    margin-left: 4.17vw;
                }
            }

            .item-right {

                width: 42.59vw;
                height: 24.07vw;
                background: url("../assets/images/index/may/bg_renewal.png");
                background-size: cover;
                display: inline-block;
                float: right;

                .title {
                    display: block;
                    font-size: 5vw;
                    margin-left: 4.17vw;
                    margin-top: 3vw;
                    margin-bottom: 3vw;
                }

                .num {
                    display: block;
                    font-size: 6.67vw;
                    margin-left: 4.17vw;
                }
            }
        }
    }

    .may-nav {

        //margin-left: 5.55vw;
        //margin-right: 5.55vw;

        .slide-zoom {
            //text-align: left;
            text-align: center;
        }

        .grid {
            padding: 0;
        }

        .col {
            padding: 0;
        }

        .nav-item {
            display: inline-block;


            &.line-one {
                margin-top: 5.55vw;
            }

            &.line-two {
                margin-top: 5.09vw;
                margin-bottom: 9.5vw;
            }

            .item-circle {
                width: 2.78vw;
                height: 2.78vw;
                background-color: #e66660;
                border-radius: 2.78vw;
                display: block;
                position: absolute;
                margin-left: 5.55vw;
            }

            .item-icon {
                display: block;
                height: 8.33vw;
                width: 8.33vw;
                i.customer-yellow {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_client_y.png");
                    background-size: cover;
                }
                i.customer-green {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_client_g.png");
                    background-size: cover;
                }
                i.add-customer-yellow {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_assistant_y.png");
                    background-size: cover;
                }
                i.add-customer-green {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_assistant_g.png");
                    background-size: cover;
                }

                i.activity-yellow {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_activity_y.png");
                    background-size: cover;
                }
                i.activity-green {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_activity_g.png");
                    background-size: cover;
                }
                i.policy-yellow {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_policy_y.png");
                    background-size: cover;
                }
                i.policy-green {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_policy_g.png");
                    background-size: cover;
                }

                i.news-yellow {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_new_y.png");
                    background-size: cover;
                }
                i.news-green {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_new_g.png");
                    background-size: cover;
                }

                i.message-yellow {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_message_y.png");
                    background-size: cover;
                }

                i.message-green {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_message_g.png");
                    background-size: cover;
                }

                i.achieve-yellow {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_performance_y.png");
                    background-size: cover;
                }
                i.achieve-green {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_performance_g.png");
                    background-size: cover;
                }
                i.team-yellow {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_team_y.png");
                    background-size: cover;
                }

                i.team-green {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_team_g.png");
                    background-size: cover;
                }

                i.calendar-yellow {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_schedule_y.png");
                    background-size: cover;
                }
                i.calendar-green {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_schedule_g.png");
                    background-size: cover;
                }
                i.live-yellow {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_live_y.png");
                    background-size: cover;
                }
                i.live-green {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_live_g.png");
                    background-size: cover;
                }
                i.settings-yellow {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_setting_y.png");
                    background-size: cover;
                }
                i.settings-green {
                    height: 8.33vw;
                    width: 8.33vw;
                    display: inline-block;
                    background: url("../assets/images/index/menu/icon_setting_g.png");
                    background-size: cover;
                }
            }

            .item-text {
                display: block;
                color: #333;
                font-size: 3.89vw;
                margin-top: 1.48vw;
            }
        }
    }
}
